<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/wesite/view/common/base.jsp"%>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>意见反馈</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <%@ include file="/wesite/view/common/common.jsp"%>
    <style>
        .content #btnspan .close {
            width: 1.066667rem;
            height: 1.066667rem;
            background: url(../images/ico-cross-white.png) center center no-repeat #ff6767;
            background-size: 0.506667rem;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 10;
        }
        .idea-pic .pic{
            width: 1.066667rem;
            height:1.066667rem ;
        }
        .upload-pic .content img{
            width: 3.84rem;
            height:3.84rem;
        }
        .upload-pic .content .pic{
            margin-bottom: .233333rem;
        }
    </style>
</head>
<body>
<div class="feedback">
    <div class="box">
        <textarea name="content1" maxlength="500" placeholder="欢迎写下您宝贵的意见，让我们更好的改善产品,限定输入500字"></textarea>
        <div class="upload-pic">
            <div class="hd"><h3>上传图片：</h3></div>
            <div class="content">
                    <div id="btnspan">

                        </div>
                <span class="upload" >
                        <input id="imgbtn"  type="file">
                    </span>
            </div>
        </div>
    </div>
    <div class="box">
        <input type="text" value="${phone}" name="phone" placeholder="联系方式">
    </div>
    <p class="tips">您的联系方式仅工作日员可见，用于跟您联系解决问题.</p>
</div>
<div class="h88"></div>
<div class="h98"></div>
<div class="feedback-bottom">
    <a href="javascript:tosubmit();">
    <span>提交</span>
    </a>
</div>
<script src="${webctx}/script/upload.js"></script>
<script src="${webctx}/script/plupload.full.min.js"></script>
<script src="${webctx}/script/aui-toast.js"></script>
<script type="text/javascript">
    var uploader;
    $(function(){
        var plparm={
            runtimes : 'html5,flash,silverlight,html4',
            browse_button :"imgbtn",
            multi_selection: false,
            flash_swf_url : ctx+'/plugins/plupload2/Moxie.swf',
            silverlight_xap_url : ctx+'/plugins/plupload2/Moxie.xap',
            url : '',
            filters: {
                max_file_size : '500kb',
                prevent_duplicates :false, //不允许选取重复文件
                mime_types : [ //只允许上传图片文件
                    { title : "图片文件", extensions : "jpg,png,jpeg,gif" }
                ]
            },
            init: {
                FilesAdded: function(up, files) {
//					if(up.files.length>1)
//						up.removeFile(up.files[0]);
                    if(files.length>0)pedit_prewn--;
                    for (var i = 0; i < files.length; i++) {
                        pedit_loadfs.push(files[i]);
                        var html = "<div class='pic' id='img_" + files[i].id + "'><img src='" + ctx + "/images/imgloading.png'/><input name='photo' type='hidden'/> <div class='progressbg'></div><div class='progresstxt'></div><div class=\"close\" onclick=\"javascript:deleteImg(this)\"></div></div>";


                        $("#btnspan").before(html);
                        pedit_loadprew();
                    }

                },UploadFile:function(up,file){
                    var f=$('#img_'+file.id);
                    $(".progresstxt",f).show();
                },UploadProgress:function(up,file){
                    var f=$('#img_'+file.id);
                    var d=$(".progressbg",f);
                    var w=f.width()*parseInt(file.percent)/100;
                    d.css("width",w+"px");
                    $(".progresstxt",f).html(file.percent+"%");
                },FileUploaded:function(up,file,responseObject){
                    var re=jQuery.parseJSON(responseObject.response);
                    $("input",$('#img_'+file.id)).val(re.fileid);
                },UploadComplete:function(){
                    tosave();
                }
            }
        }
        $oss.setUpDir("feedback");
        uploader=$oss.initUpload(plparm);
        phoneTrim();




    })
    function deleteImg(obj){
        $(obj).parents('.pic').remove();
    }

    var pedit_loadfs=[];
    var pedit_fr;
    var pedit_prewn=0;
    function previewImages(file,callback){
        if(!file || !/image\//.test(file.type)) return;
        if(file.type=='image/gif'){
            var fr = new mOxie.FileReader();
            fr.onload = function(){
                callback(fr.result);
            }
            fr.readAsDataURL(file.getSource());
        }else{
            var preloader = new mOxie.Image();
            preloader.onload = function() {
                preloader.downsize( 80, 80 );
                var imgsrc = preloader.type=='image/jpeg' ? preloader.getAsDataURL('image/jpeg',80) : preloader.getAsDataURL();
                callback && callback(imgsrc);
                preloader.destroy();
                preloader = null;
            };
            preloader.load( file.getSource() );
        }
    }
    //生成预览图

    function pedit_loadprew(){
        pedit_prewn++;
        if(pedit_prewn<pedit_loadfs.length){
            previewImages(pedit_loadfs[pedit_prewn],function(imgsrc){
                $("img",$("#img_"+pedit_loadfs[pedit_prewn].id)).attr('src',imgsrc);
                if(pedit_fr){
                    pedit_fr.destroy();
                    pedit_fr = null;
                }
                pedit_loadprew();
            })
        }
    }
    var subing=false;
    var  toast = new auiToast({})
    function tosubmit(){
        if($("[name='content1']").val()==''){
            toast.fail({
                title:"请填写您的意见与建议",
                duration:1000
            })
            return;
        }
        if($("[name='phone']").val() =='') {
            toast.fail({
                title:"手机号码不能为空",
                duration:1000
            })
            return;
        }
        if(!$w.isMobile($("[name='phone']").val())) {
            toast.fail({
                title:"请输入正确的手机号码",
                duration:1000
            })
            return;
        }
        if(!subing){
            subing=true;
            if(uploader.files.length>0)uploader.start();
            else tosave();
        }
    }
    //加载页面,去除手机号中的空格
    function phoneTrim() {
        var phone = $("[name='phone']").val();
        var phoneTo = $.trim(phone);
        $("[name='phone']").val(phoneTo);

    }
    function tosave(){
        var plimgs = [];
        var itr = $(".content .pic input");
        for(var i = 0; i < itr.length; i++){
            plimgs.push(itr.eq(i).attr("value"));
        }
        if(plimgs.length>6){
            toast.fail({
                title:"图片不能超过6张",
                duration:1000
            })
            subing=false;
            return false ;
        } else {
            toast.success({
                title:"提交成功",
                duration:1000
            })
        }
        $w.httpRequest({
            url:"${ctx}/we/user/saveFeedBack",
            data:{"phone":$("[name='phone']").val(),"content":$("[name='content1']").val(),"photoids":plimgs},
            ok:function(ret){
                window.location.href="${ctx}/we/home/index";
                $(window).scrollTop(80);
            },all:function(){subing=false;}
        })
    }

    $(function () {
        var hig_top = $(".feedback-bottom span").offset().top;
        $(".feedback-bottom span").css("top", hig_top);
    })
</script>